<template>
    <el-card class="box-card">
        <div class="card-content">
            <div class="card-header">
                <el-link
                    v-if="isOpenInNewCategory"
                    underline="never"
                    :icon="OpenInNew"
                    :href="getLink()"
                    target="_blank"
                />
            </div>
            <div class="icon-title">
                <el-icon size="25px">
                    <component :is="getIcon()" />
                </el-icon>
                <div class="card">
                    <h5 class="cat_title">
                        {{ title }}
                    </h5>
                    <div class="cat_description">
                        <Markdown :source="$t(`welcome.${category}.text`)" />
                    </div>
                </div>
            </div>
        </div>
    </el-card>
</template>

<script setup lang="ts">
    import {computed} from "vue";
    import OpenInNew from "vue-material-design-icons/OpenInNew.vue";
    import Monitor from "vue-material-design-icons/Monitor.vue";
    import Slack from "./components/SlackLogo.vue";
    import PlayBox from "vue-material-design-icons/PlayBoxMultiple.vue";
    import Markdown from "../layout/Markdown.vue";

    interface Props {
        title: string;
        category: string;
    }

    const props = defineProps<Props>();

    const getIcon = () => ({help: Slack, tutorial: PlayBox, tour: Monitor}[props.category] || Monitor);

    const getLink = () => {
        const links = {
            help: "https://kestra.io/slack",
        };
        return links[props.category as keyof typeof links] || "#";
    };

    const isOpenInNewCategory = computed(() => {
        return props.category === "help";
    });
</script>

<style scoped lang="scss">
a:hover {
    text-decoration: none;
}

.el-card {
    background-color: var(--ks-background-card);
    border-color: var(--ks-border-primary);
    box-shadow: var(--el-box-shadow);
    position: relative;
    min-width: 250px;
    flex: 1;
    cursor: pointer;

    &:deep(.el-card__header) {
        padding: 0;
    }
}

.box-card {
    .card-header {
        position: absolute;
        top: 5px;
        right: 5px;
    }

    .cat_title {
        width: 100%;
        margin: 3px 0 10px;
        padding-left: 20px;
        font-weight: 600;
        font-size: var(--el-font-size-small);
    }

    .cat_description {
        width: 100%;
        margin: 0;
        padding-left: 20px;
    }
}

.icon-title {
    display: inline-flex;

    &.icon-title-left {
        margin-right: 10px;
    }
}

.el-link {
    font-size: 20px;
}
</style>
